class Enlarge 
{
    constructor(el, options = {})
    {
        //保存数据
        this.el = document.querySelector(el)
        this.img = this.el.querySelector('.img')
        this.mask = this.el.querySelector('.mask')
        this.enlarge = this.el.querySelector('.enlarge')
        //写特效
        /* this.overOut()
        this.maskMove()
        this.tbEnlarge() */
        this.init()
    }

    init() {
        this.overOut()
        this.maskMove()
        /* this.tbEnlarge() */
    }

    overOut() {
            //给左侧图片绑定移入事件 显示
    /*      this.el.querySelector('.img').onmouseover = () =>{
                this.el.querySelector('.mask').style.display = 'block'
                this.el.querySelector('.enlarge').style.display = 'block'
            }
            //给左侧图片绑定移出事件 隐藏
            this.el.querySelector('.img').onmouseout = () =>{
                this.el.querySelector('.mask').style.display = 'none'
                this.el.querySelector('.enlarge').style.display = 'none' */
                this.img.onmouseover = () =>  this.mask.style.display = this.enlarge.style.display  = 'block'
                this.img.onmouseout = () =>  this.mask.style.display = this.enlarge.style.display  = 'none'
                
        }
        maskMove() {
            //1获取放大镜盒模型里面的左侧图片
            //2绑定鼠标移入事件
            this.img.onmousemove = (evt)=>{
                let e = evt || window.event
                   //3事件处理函数中获取鼠标位置
                let left = e.pageX-this.el.offsetLeft - this.mask.offsetWidth/2
                let top = e.pageY-this.el.offsetTop - this.mask.offsetHeight/2
                
                if(left<0) left=0
                if(top<0) top=0
                
                let maxLeft = this.img.offsetWidth - this.mask.offsetWidth
                let maxTop = this.img.offsetHeight - this.mask.offsetHeight
                
                if(left>maxLeft)left=maxLeft
                if(top>maxTop)top=maxTop
            //4事件处理函数中同步遮罩框
            this.mask.style.left = left + 'px'
            this.mask.style.top = top + 'px'
            //5事件处理函数中同步放大镜背景位置
            this.tbEnlarge(left,top)
            }
        }
        //鼠标移动同步放大镜效果
        tbEnlarge(left, top) {
            this.enlarge.style.backgroundPosition = `-${left*2}px -${top*2}px`
        }
    }
    
    export default Enlarge